<template>
    <div class="app-container">
      <el-row :gutter="60">
        <el-col :span="6">
          <el-row type="flex" justify="space-around" align="middle">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="handleAdd('纱支')" v-hasPermi="['zhcloud:category:add']">增加纱支</el-button>
            </el-col>
            <el-col :span="12">
              <span class="pull-right">纱支</span>
            </el-col>
          </el-row>
          <el-table
            v-loading="storageSpecDictListLoading"
            :data="storageSpecDictList.a"
            height="290"
          >
            <af-table-column label="操作" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="handleRowDelete(scope.row)"
                  v-hasPermi="['zhcloud:category:del']"
              >删 除</el-button>
              </template>
            </af-table-column>
            <af-table-column prop="name" label="纱支"></af-table-column>
            <af-table-column prop="itbz" label="备注" width="120" :show-overflow-tooltip="true"></af-table-column>
          </el-table>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="space-around" align="middle">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="handleAdd('工艺')" v-hasPermi="['zhcloud:category:add']">增加工艺</el-button>
            </el-col>
            <el-col :span="12">
              <span class="pull-right">工艺</span>
            </el-col>
          </el-row>
          <el-table
            v-loading="storageSpecDictListLoading"
            :data="storageSpecDictList.b"
            height="290"
          >
            <af-table-column label="操作" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="handleRowDelete(scope.row)"
                  v-hasPermi="['zhcloud:category:del']"
              >删 除</el-button>
              </template>
            </af-table-column>
            <af-table-column prop="name" label="纱支"></af-table-column>
            <af-table-column prop="itbz" label="备注" width="120" :show-overflow-tooltip="true"></af-table-column>
          </el-table>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="space-around" align="middle">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="handleAdd('工序')" v-hasPermi="['zhcloud:category:add']">增加工序</el-button>
            </el-col>
            <el-col :span="12">
              <span class="pull-right">工序</span>
            </el-col>
          </el-row>
          <el-table
            v-loading="storageSpecDictListLoading"
            :data="storageSpecDictList.c"
            height="290"
          > 
            <af-table-column label="操作" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="handleRowDelete(scope.row)"
                  v-hasPermi="['zhcloud:category:del']"
              >删 除</el-button>
              </template>
            </af-table-column>
            <af-table-column prop="name" label="纱支"></af-table-column>
            <af-table-column prop="itbz" label="备注" width="120" :show-overflow-tooltip="true"></af-table-column>
          </el-table>
        </el-col>
        </el-row>
        <el-row :gutter="60" class="mt20">
        <el-col :span="6">
          <el-row type="flex" justify="space-around" align="middle">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="handleAdd('用途')" v-hasPermi="['zhcloud:category:add']">增加用途</el-button>
            </el-col>
            <el-col :span="12">
              <span class="pull-right">用途</span>
            </el-col>
          </el-row>
          <el-table
            v-loading="storageSpecDictListLoading"
            :data="storageSpecDictList.d"
            height="290"
          > 
            <af-table-column label="操作" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="handleRowDelete(scope.row)"
                  v-hasPermi="['zhcloud:category:del']"
              >删 除</el-button>
              </template>
            </af-table-column>
            <af-table-column prop="name" label="纱支"></af-table-column>
            <af-table-column prop="itbz" label="备注" width="120" :show-overflow-tooltip="true"></af-table-column>
          </el-table>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="space-around" align="middle">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="handleAdd('产地')" v-hasPermi="['zhcloud:category:add']">增加产地</el-button>
            </el-col>
            <el-col :span="12">
              <span class="pull-right">产地</span>
            </el-col>
          </el-row>
          <el-table
            v-loading="storageSpecDictListLoading"
            :data="storageSpecDictList.e"
            height="290"
          > 
            <af-table-column label="操作" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="handleRowDelete(scope.row)"
                  v-hasPermi="['zhcloud:category:del']"
              >删 除</el-button>
              </template>
            </af-table-column>
            <af-table-column prop="name" label="纱支"></af-table-column>
            <af-table-column prop="itbz" label="备注" width="120" :show-overflow-tooltip="true"></af-table-column>
          </el-table>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="space-around" align="middle">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="handleAdd('漂染性')" v-hasPermi="['zhcloud:category:add']">增加漂染性</el-button>
            </el-col>
            <el-col :span="12">
              <span class="pull-right">漂染性</span>
            </el-col>
          </el-row>
          <el-table
            v-loading="storageSpecDictListLoading"
            :data="storageSpecDictList.f"
            height="290"
          > 
            <af-table-column label="操作" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="handleRowDelete(scope.row)"
                  v-hasPermi="['zhcloud:category:del']"
              >删 除</el-button>
              </template>
            </af-table-column>
            <af-table-column prop="name" label="纱支"></af-table-column>
            <af-table-column prop="itbz" label="备注" width="120" :show-overflow-tooltip="true"></af-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-dialog title="信息" :visible.sync="openStorageSpecDictDialog" width="400px" :destroy-on-close="true" :before-close="close">
        <el-form ref="formParams" :model="formParams" :rules="rules" label-width="80px" :inline="true">
          <el-form-item :label="nameLabel" prop="name">
            <el-input
            v-model="formParams.name"
            :placeholder="'请输入' + nameLabel"
            clearable
            />
          </el-form-item>
          <el-form-item label="备注" prop="itbz">
            <el-input
            v-model="formParams.itbz"
            placeholder="请输入备注"
            clearable
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleStorageSpecDictAdd('formParams')">添 加</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { warehouseInDetailsDropDown1 } from "@/api/storage/commonGoods/warehouseIn"
  import { storageSpecDictAdd, storageSpecDictDel } from "@/api/storage/storageSetting/storageSpecDict"
  
  export default {
    name: "StorageSpecDict",
    data() {
      return {
        //添加表单参数
        formParams:{
          name:"",
          itbz:"",
          type:""
        },
        //删除表单详情
        delQureyParams:{
          id2:""
        },
        rules:{
          name:[{
            required: true,
            message: '不能为空',
            trigger: "blur"
          }]
        },
        //添加name名称
        nameLabel:"",
        //打开弹窗
        openStorageSpecDictDialog:false,
        //加载
        storageSpecDictListLoading: true,
        storageSpecDictList:[]
      }
    },
    beforeRouteEnter(to, from, next) {
      const params = to.params
      next(vm => {   
        if(Object.keys(params).length > 0) {
          if(to.params.refresh == true) {
            vm.getStorageSpecDictDetails()
          }
        }
      })
    },
    created() {
      this.getStorageSpecDictDetails()
    },
    methods: {
       /**获取规格字典 */
       getStorageSpecDictDetails() {
        this.storageSpecDictListLoading= true
        warehouseInDetailsDropDown1({}).then(response => {
          this.storageSpecDictList = response.data;
          this.storageSpecDictListLoading= false
        });
      },
      handleAdd(data) {
        this.changeStorageSpecDictDialog()
        this.nameLabel = data
      },
      /**规格字典添加 */
      handleStorageSpecDictAdd(formName) {
        this.$refs[formName].validate((valid, data) => {
          if(valid) {
            switch(this.nameLabel) {
              case "纱支":
                this.formParams.type = "A";break;
              case "工艺":
                this.formParams.type = "B";break;
              case "工序":
                this.formParams.type = "C";break;
              case "用途":
                this.formParams.type = "D";break;
              case "产地":
                this.formParams.type = "E";break;
              case "漂染性":
                this.formParams.type = "F";break;
              default: 
                break;
            }
            this.$modal.loading("数据正在添加中，请稍等...")
            storageSpecDictAdd(this.formParams).then(response => {
              this.$modal.msgSuccess('添加成功')
              this.$modal.closeLoading()
              this.close()
              this.getStorageSpecDictDetails()
            }).catch(()=> {
              this.$modal.closeLoading()
            });
          } else {
            for(let i in data) {
              const item = data[i]
              for(let j in item) {
                const message = item[j].message
                return this.$modal.msgError(message)
              }
            }
            return false
          }
        })
      },
       /**删除规格字典详情 */
       handleStorageSpecDictDel() {
        this.$modal.loading("数据正在删除中，请稍等...")
        storageSpecDictDel(this.delQureyParams).then(response => {
          this.$modal.closeLoading()
          this.$modal.msgSuccess('删除成功！')
          this.getStorageSpecDictDetails()
        }).catch(()=> {
          this.$modal.closeLoading()
        })
      },
      handleRowDelete(data) {
        this.$modal.confirm("是否删除？").then(()=> {
          this.delQureyParams.id2 = data.id
          this.handleStorageSpecDictDel()
        }).catch(() => {})
      },
      changeStorageSpecDictDialog() {
        this.openStorageSpecDictDialog = !this.openStorageSpecDictDialog
      },
      close() {
        this.changeStorageSpecDictDialog()
        this.reset()
      },
      reset() {
        this.formParams = {
          name:"",
          itbz:"",
          type:""
        }
      },
    }
  }
  </script>
  